{{#>base title=data.page.sizer appId="Sizer"}}

    {{#*inline "pageContent"}}
        <div class="row">
            <div class="col-md-12">
                <h3 class="page-title">
                    {{data.page.sizer}}
                </h3>
                {{> fixtures/tab-sizer options=true}}
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">

                <div class="markdown">
                    <pre><code class="javascript">$p.sizer(Seletor, Options,[SelectDatas]);</code></pre>
                </div>

            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <h3>Functions</h3>
                <div class="markdown">
                    <pre><code class="javascript">/**
* 获取配置
* @return {Object}
**/
Sizer.getOption();
/**
*获取全部数据
*@return {Array}
**/
Sizer.getAllDatas();
/**
* 获取已选数据
* @return {Array}
**/
Sizer.getSelectDatas();
/**
* 选中数据
* @param data {array|string|obj}
* array:[{name:"2.1.12.3",value:1},...]
* obj:{name:"2.1.12.3",value:1},
* string:"all"全选,"null"全不选
* @return Sizer;
**/
Sizer.chooseData(data);
/**
* 动态绑定事件
* @param functionName {String}
* expand,close,option,search,clean,submit,cancel
* @param callback {Function}
* @return Sizer;
**/
Sizer.on(functionName,callback);
/**
* 取消事件绑定
* @param functionName {String}
* expand,close,option,search,clean,submit,cancel
* @return Sizer;
**/
Sizer.unBind(functionName);
/**
* 销毁插件
*/
Sizer.destroy();
/**
* 切换面板状态
*/
Sizer.expandPanel();
/**
* 更新数据
* @param params{Object}
*/
Sizer.update(params);</code></pre>
                </div>

            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <h3>Options</h3>
                <hr>
                <table class="table-custom table table-hover table-fixed dataTable table-scrollable">
                    <thead>
                    <tr>
                        <th width="200">参数</th>
                        <th width="300">默认值</th>
                        <th width="300">数据类型</th>
                        <th>描述</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><mark>[isMultiple]</mark></td>
                        <td>false</td>
                        <td>boolean</td>
                        <td>是否为多选</td>
                    </tr>
                    <tr>
                        <td><mark>[isExpand]</mark></td>
                        <td>false</td>
                        <td>boolean</td>
                        <td>是否展开</td>
                    </tr>
                    <tr>
                        <td><mark>dataSource</mark></td>
                        <td>--</td>
                        <td>function</td>
                        <td>一个方法，定义dataListview显示的数据源</td>
                    </tr>
                    <tr>
                        <td><mark>dataParams</mark></td>
                        <td>--</td>
                        <td>function</td>
                        <td>设置自定义请求参数</td>
                    </tr>
                    <tr>
                        <td><mark>[dataMapping]</mark></td>
                        <td>{<br/>
                            "name": "name",<br/>
                            "value": "id"<br/>
                            }</td>
                        <td>object</td>
                        <td>数据映射</td>
                    </tr>
                    <tr>
                        <td><mark>[position]</mark></td>
                        <td>{<br/>
                            left: 0<br/>
                            }</td>
                        <td>object</td>
                        <td>面板的相对位置(以按钮为参照物)</td>
                    </tr>
                    <tr>
                        <td><mark>[style]</mark></td>
                        <td>--</td>
                        <td>string</td>
                        <td>自定义class</td>
                    </tr>
                    <tr>
                        <td><mark>[processing]</mark></td>
                        <td>&lt;i class="fa fa-spinner fa-spin big"&gt;&lt;/i&gt;&nbsp;&nbsp;加载中</td>
                        <td>string</td>
                        <td>loading默认文字</td>
                    </tr>
                    <tr>
                        <td><mark>[search]</mark></td>
                        <td>请输入查询字段</td>
                        <td>string</td>
                        <td>搜索框默认文字</td>
                    </tr>
                    <tr>
                        <td><mark>[callbackExpand]</mark></td>
                        <td>--</td>
                        <td>function</td>
                        <td>面板展开时的回调</td>
                    </tr>
                    <tr>
                        <td><mark>[callbackClose]</mark></td>
                        <td>--</td>
                        <td>function([<code>datas</code>,<code>allDatas</code>]){}</td>
                        <td>面板关闭时的回调<br/><code>datas</code>:选中的数据<br/><code>allDatas</code>:全部数据</td>
                    </tr>
                    <tr>
                        <td><mark>[callbackOption]</mark></td>
                        <td>--</td>
                        <td>function([<code>data</code>]){}</td>
                        <td>点击选项时的回调<br/><code>data</code>:选中的数据</td>
                    </tr>
                    <tr>
                        <td><mark>[callbackSearch]</mark></td>
                        <td>--</td>
                        <td>function([<code>data</code>]){}</td>
                        <td>点击选项时的回调<br/><code>data</code>:搜索到的数据</td>
                    </tr>
                    <tr>
                        <td><mark>[callbackClean]</mark></td>
                        <td>--</td>
                        <td>function([<code>data</code>]){}</td>
                        <td>点击清除按钮时的回调<br/><code>data</code>:选择的数据</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <h3>Options(isMultiple为true时有效)</h3>
                <hr>
                <table class="table-custom table table-hover table-fixed dataTable table-scrollable">
                    <thead>
                    <tr>
                        <th width="200">参数</th>
                        <th width="300">默认值</th>
                        <th width="300">数据类型</th>
                        <th>描述</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><mark>[callbackSelectAll]</mark></td>
                        <td>--</td>
                        <td>function([<code>data</code>]){}</td>
                        <td>点击全选按钮时的回调<br/><code>data</code>:全部数据</td>
                    </tr>
                    <tr>
                        <td><mark>[callbackSubmit]</mark></td>
                        <td>--</td>
                        <td>function([<code>data</code>]){}</td>
                        <td>点击全选按钮时的回调<br/><code>data</code>:全部数据</td>
                    </tr>
                    <tr>
                        <td><mark>[callbackCancel]</mark></td>
                        <td>--</td>
                        <td>function(){}</td>
                        <td>点击取消按钮时的回调</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <h3>Options.dataMapping</h3>
                <hr>
                <table class="table-custom table table-hover table-fixed dataTable table-scrollable">
                    <thead>
                    <tr>
                        <th width="200">参数</th>
                        <th width="300">默认值</th>
                        <th width="300">数据类型</th>
                        <th>描述</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><mark>name</mark></td>
                        <td>name</td>
                        <td>string</td>
                        <td>选项显示的字段</td>
                    </tr>
                    <tr>
                        <td><mark>value</mark></td>
                        <td>value</td>
                        <td>string</td>
                        <td>选项的值</td>
                    </tr>
                    </tbody>
                </table>

            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <h3>SelectDatas</h3>
                <hr>
                <table class="table-custom table table-hover table-fixed dataTable table-scrollable">
                    <thead>
                    <tr>
                        <th width="200">参数</th>
                        <th width="300">默认值</th>
                        <th width="300">数据类型</th>
                        <th>描述</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><mark>--</mark></td>
                        <td>--</td>
                        <td>array</td>
                        <td>
                            数据格式如下:
<pre>[{
  "id": 4 //选中项的id
  "name": "2.1.4" //此数据用于设置默认的选中文字，如需提示文字，则不需要此设置 仅在isMultiple为false时有效
},
...
]或者
"all","null"</pre>
                            如果<code>name</code>不为空则使用<code>name</code>的值覆盖原先按钮的提示问题
                        </td>
                    </tr>
                    </tbody>
                </table>

            </div>
        </div>

        <!-- END PAGE CONTENT-->
    {{/inline}}

    {{#*inline "appScript"}}
        <script type="text/javascript">
            pagurian.call("modules/slider/app", function(app) {
                app.page.index();
            });
        </script>
    {{/inline}}

{{/base}}
